<template>
  <div class="main">
    <el-row>
      <el-col>
        <el-card>
          <!-- 添加图片 -->
          <div
            id="problem_pic"
            :style="{
              backgroundImage: `url(${topic_content.topic_pic})`,
            }"
          >
            <label
              for="file_pic"
              style="width: 758px; height: 310px; cursor: pointer"
            >
              <div v-if="!topic_content.topic_pic">
                <i class="el-icon-camera-solid"></i>
                <span class="ico_word">添加题图</span>
              </div>

              <div v-else class="topic_pic">
                <i class="el-icon-camera-solid"></i>
                <span class="ico_word">更换题图</span>
              </div>

              <input
                type="file"
                id="file_pic"
                ref="fileId"
                @change="getPicUrl"
                style="display: none"
                accept=".jpeg, .jpg, .png"
              />
            </label>
          </div>

          <p>请选择话题类型：</p>
          <el-radio-group v-model="topic_content.topic_category">
            <el-radio :label="1">问题求解</el-radio>
            <el-radio :label="2">学习干货</el-radio>
            <el-radio :label="3">校园那些事</el-radio>
          </el-radio-group>
          <!-- 话题题目 -->
          <el-form>
            <div id="topic_name">
              <input
                class="title"
                type="text"
                v-model="topic_content.title"
                placeholder="请输入话题标题"
              />
            </div>

            <div>
              <div id="editorElem" style="text-align: left; margin-top: 20px">
                <div v-html="topic_content.html_content"></div>
              </div>
            </div>
            <div id="relaese_btn">
              <el-button type="primary" class="issue" @click="issueTopic"
                >发布</el-button
              >
            </div>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'editor',
  data () {
    return {
      // 初始化editor对象
      editor: null,
      topic_content: {
        topic_id: null,
        topic_pic: '',
        title: '',
        html_content: '',
        topic_category: 1,
        user_id: JSON.parse(sessionStorage.getItem('user')).user_id
      }
    }
  },
  mounted () {
    this.editor = new E('#editorElem')
    this.editor.create()
    this.editTopic()
  },
  methods: {
    // 更改话题信息
    async editTopic () {
      if (this.$route.query.id) {
        const { data: res } = await this.$http.post('/topic_content', { topicId: this.$route.query.id })
        this.topic_content.topic_id = res.topic_id
        this.topic_content.topic_pic = res.topic_pic
        this.topic_content.title = res.topic_title
        this.topic_content.html_content = res.topic_content
        this.topic_content.topic_category = res.topic_category
      }
    },
    // 发布话题
    async issueTopic () {
      // 判断是进行修改还是发布
      if (this.$route.query.id) {
        this.topic_content.html_content = this.editor.txt.html()
        const { data: res } = await this.$http.post('/edit_topic', this.topic_content)
        if (res.status !== 200) {
          return this.$message.error('修改失败！')
        }
        this.$message.success('修改成功！')
        this.$router.push('/user_info')
      } else {
        this.topic_content.html_content = this.editor.txt.html()
        const { data: res } = await this.$http.post('/issue_topic', this.topic_content)
        if (res.status !== 200) {
          return this.$message.error('发布失败！')
        }
        this.$message.success('发布成功！')
        this.$router.push('/')
      }
    },
    // 获取异步请求图片url
    async getPicUrl () {
      var formData = new window.FormData()
      // 将文件内容追加到formdata中
      formData.append('attrName', this.$refs.fileId.files[0])
      // 发送请求，上传图片数据
      const { data: res } = await this.$http.post('/uploads', formData)
      var path = res.path.replace(/\\/g, '/')
      // 获取上传的图片路径
      this.topic_content.topic_pic = 'http://localhost:3000/public' + path
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 800px;
}

p {
  margin-top: 20px;
}

#problem_pic {
  width: 100%;
  height: 310px;
  background-color: rgb(245, 245, 245);
  background-size: cover;
  background-position: center;
}

.topic_pic {
  height: 310px;
  &:hover {
    color: rgb(255, 255, 255);
    background-color: rgba(102, 102, 102, 0.5);
  }
}

.el-icon-camera-solid {
  width: 100%;
  height: 310px;
  font-size: 50px;
  text-align: center;
  line-height: 310px;
}

.ico_word {
  text-align: center;
  display: block;
  margin-top: -130px;
}

#topic_name {
  margin-top: 20px;
}

#topic_content {
  margin-top: 20px;
}

.issue {
  margin: 20px 0;
  float: right;
  right: 0;
}

.title {
  font-size: 26px;
}

// 重置表单内容输入框
input {
  outline: none;
  background: transparent;
  border: none;
  outline: medium;
  border-bottom: 1px solid #ddd;
  width: 100%;
  height: 40px;
  :focus {
    outline: none;
    background-color: transparent;
  }
  ::selection {
    background: transparent;
  }
}
</style>
